<template>
  <view class="box">
    <template>
      <button @click="uploade" class="insert">点击插入图片</button>
      <view style="background-color: #fff;">
        <view class="pic">
          <image :src="sellList.pic" mode="aspectFit" class="image"></image>
        </view>
        <view class="to_things">
          <view class="name">
            以物名：<input type="text" placeholder="请输入以物(您拥有的物品)名称" v-model="sellList.name" maxlength="30"
              style="font-size: 32rpx; width: 78.2%; height: 34rpx; background-color: #f1f1f1;padding-left: 20rpx;">
          </view>
          <view class="description">
            以物描述：<textarea name="" id="" cols="30" rows="7" placeholder="请输入以物描述" :show-confirm-bar=hide
              v-model="sellList.description"
              style="color: #909090; width: 75%; background-color: #f1f1f1;padding-left: 20rpx;"></textarea>
          </view>
        </view>
        <view class="swap_things">
          <view class="name">
            易物名：<input type="text" placeholder="请输入易物(您想要的物品)名称" v-model="sellList.manner" maxlength="30"
              style="font-size: 32rpx; width: 75%; height: 34rpx; background-color: #f1f1f1;padding-left: 20rpx; width: 78.2%;">
          </view>
          <view class="description">
            易物描述：<textarea name="" id="" cols="50" rows="7" placeholder="请输入易物描述" :show-confirm-bar=hide
              v-model="sellList.swap_description"
              style="      color: #909090; width: 75%; background-color: #f1f1f1;padding-left: 20rpx;"></textarea>
          </view>

        </view>
        <view class="exchange_place">
          交易地点：<input type="text" placeholder="期望交易地点" v-model="sellList.place" maxlength="17"
            style="font-size: 32rpx; width: 75%; height: 34rpx; background-color: #f1f1f1;padding-left: 20rpx;">
        </view>
        <view class="summit" style="padding-bottom: 30rpx;">
          <button form-type="submit" :style="sendChange" @touchstart="start" @touchend="end"
            @click="postSellList()">提交</button>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        sellList: {
          name: '',
          description: '',
          manner: '',
          place: '',
          swap_description: '',
          pic: '',
          user_openid: '',
          state: 'show',
          support_num: [],
          support_array: []
        },
        sendLimit: 0,
        sendChange: '',
        hide: false
      }
    },
    onShow() {
      this.sellList.pic = uni.getStorageSync('jiayi_exchange')
    },
    methods: {
      start() {
        this.sendChange = 'background: rgba(11, 219, 11, .8);'
      },
      end() {
        this.sendChange = 'background: rgba(11, 219, 11, 1);'
      },
      postSellList() {
        if(this.sendLimit == 0) {
          this.sendLimit = 1
          if (this.sellList.name.replace(/ |\n/g, "") !== '' && this.sellList.manner.replace(/ |\n/g, "") !== '' && this
            .sellList.place.replace(/ |\n/g, "") !== '') {
              this.sellList.user_openid = uni.getStorageSync('jiayi_openid')
              uniCloud.callFunction({
                name: 'add',
                data: this.sellList,
                success: () => {
                  uni.setStorageSync('jiayi_exchange',
                    "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/d621cd0d-285e-44f1-966c-bfd04b648d84.jpg"
                  )
                  this.sellList = {
                    name: '',
                    description: '',
                    manner: '',
                    place: '',
                    swap_description: '',
                    pic: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/d621cd0d-285e-44f1-966c-bfd04b648d84.jpg',
                    user_openid: '',
                    state: 'show',
                    support_num: [],
                    support_array: []
                  }
                },
                complete:() => {
                  uni.showToast({
                    title: '提交成功',
                    icon: 'success',
                    duration: 2000 // 当然这个时间可根据实用场景进行相关设置
                  })
                  this.sendLimit = 0
                }
              })
          } else {
            this.sendLimit = 0
            if (this.sellList.name.replace(/ |\n/g, "") == '') {
              uni.showToast({
                title: '以物名为空',
                icon: "error",
                duration: 1000 // 当然这个时间可根据实用场景进行相关设置
              })
            } else if (this.sellList.manner.replace(/ |\n/g, "") == '') {
              uni.showToast({
                title: '易物名为空',
                icon: "error",
                duration: 1000, // 当然这个时间可根据实用场景进行相关设置
              })
            } else {
              uni.showToast({
                title: '交易地点为空',
                icon: "error",
                duration: 1000, // 当然这个时间可根据实用场景进行相关设置
              })
            }
          }
        }
      },
      uploade() {
        uni.chooseImage({
          count: 1,
          success: (res) => {
            if (res.tempFilePaths.length > 0) {
              let filePath = res.tempFilePaths[0]
              uni.navigateTo({
                url: '/subpkg/crop/crop?filePath=' + filePath + '&where=sell'
              })
            }
          },
        });
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .box {
    background-color: #e3e3e3;

    .pic {
      text-align: center;
    }

    .to_things {
      margin-left: 20rpx;
      padding-top: 20rpx;

      .name {
        display: flex;
        margin-left: 30rpx;
        font-size: 30rpx;
      }

      .description {
        display: flex;
        margin-top: 20rpx;
        font-size: 30rpx;
      }
    }

    .swap_things {
      margin-left: 20rpx;
      padding-top: 20rpx;

      .name {
        display: flex;
        margin-left: 30rpx;
        font-size: 30rpx;
        height: 32rpx;
      }

      .description {
        display: flex;
        margin-top: 20rpx;
        font-size: 30rpx;
      }
    }

    .exchange_place {
      display: flex;
      margin: 20rpx 0 30rpx 20rpx;
      font-size: 30rpx;
      height: 32rpx;
    }
  }

  .summit {
    button {
      margin-top: 20rpx;
      width: 700rpx;
      font-size: 36rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      background-color: #0bdb0b;
      color: #fff;
    }
  }
</style>
